<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>库存查询</h2>
    </div> -->
    <!-- 搜索 -->
    <!-- <div class="select_form_box mb16">
      <div class="filter-container">
        <el-select v-model.trim="searchParam.searchType" clearable placeholder="编码或名称" class="input-with-select mr64">
          <el-option v-for="item in searchTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model.trim="searchParam.search" placeholder="关键字回车搜索" class="input-with-select mr16" @keyup.enter.native="getList" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <div v-action="'stock@export'" class="operation_button_box">
      <el-button size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'stock@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
          重置
        </el-button>
        <el-button @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="data" :max-height="screenHeigh" :row-class-name="tableRowClassName" border fit :summary-method="summaryMethod" show-summary>
        <!-- <el-table-column type="selection" width="100" align="center" /> -->
        <el-table-column label="系统sku" prop="goods_code" align="center" width="240" />
        <el-table-column label="中文名称" prop="goods_name_ch" align="center" width="240" />
        <el-table-column label="英文名称" prop="goods_name_en" align="center" width="185" />
        <el-table-column label="所属虚拟仓库" prop="virtual_warehouse" align="center" width="267" />
        <el-table-column label="所属实体仓库" prop="entity_warehouse" align="center" width="222" />
        <el-table-column label="即时库存" prop="number" align="center" width="203" />
        <el-table-column label="锁定库存" prop="lock_stock" align="center" width="217" />
        <el-table-column label="在途库存" prop="trans_stock" align="center" min-width="200" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="库存导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import { action } from '@/directive/permission/index.js' // 权限判断指令
// import { downloadxlsx } from '@/utils/index'
import formOperate from '../../../layout/mixin/formOperate'
import DownModul from '@/components/DownModul/index.vue'
import FormSelections from '@/components/FormSelection'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'Stock',
  directives: {
    action
  },
  components: { DownModul, FormSelections },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 355,
      componentName: 'Stock',
      url: '/stock',
      exportUrl: '/stock-export',
      searchParam: {
        searchType: '',
        search: ''
      },
      searchTypeList: [
        {
          id: 1,
          name: '系统sku',
          key: 'goods_code'
        },
        {
          id: 2,
          name: '中文名',
          key: 'name_ch'
        },
        {
          id: 3,
          name: '英文名',
          key: 'name_en'
        },
        {
          id: 4,
          name: '仓库名称',
          key: 'warehouse'
        }
      ],
      queryParam: {
        code: '',
        name_ch: '',
        name_en: '',
        warehouse: ''
      },
      formItems: [
        {
          label: '系统sku',
          key: 'goods_code',
          type: 'input',
          placeholder: '请输入系统sku'
        },
        {
          label: '中文名',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名'
        },
        {
          label: '英文名',
          key: 'name_en',
          type: 'input',
          placeholder: '请输入英文名'
        },
        {
          label: '仓库名称',
          key: 'warehouse',
          type: 'input',
          placeholder: '请输入仓库名称'
        }
      ],
      optionsModul: [
        {
          key: 'goods_code',
          label: '商品编码'
        },
        {
          key: 'goods_name_ch',
          label: '中文名称'
        },
        {
          key: 'goods_name_en',
          label: '英文名称'
        },
        {
          key: 'virtual_warehouse',
          label: '所属虚拟仓'
        },
        {
          key: 'entity_warehouse',
          label: '所属实体仓'
        },
        {
          key: 'number',
          label: '即时库存'
        },
        {
          key: 'lock_stock',
          label: '锁定库存'
        },
        {
          key: 'trans_stock',
          label: '在途库存'
        }
      ]
    }
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { goods_code, name_ch, name_en, warehouse } = vm.queryParam
      const params = { goods_code, name_ch, name_en, warehouse }
      //   vm.handleExportxlsx(vm.exportUrl, { params })
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // 导出
    // handleExport() {
    //   const vm = this
    //   vm.exportLoading = true
    //   const params = {}
    //   const { searchType, search } = vm.searchParam
    //   if (searchType) {
    //     const item = vm.searchTypeList.find(
    //       (e) => e.id === vm.searchParam.searchType
    //     )
    //     params[item.key] = search
    //   }
    //   vm.$http.get('/stock-export', { params }).then(res => {
    //     downloadxlsx(res.data)
    //     vm.exportLoading = false
    //   }).catch(() => {
    //     vm.exportLoading = false
    //   })
    // },
    summaryMethod(params) {
      const vm = this
      const { columns, data } = params
      console.log(params)
      const sums = []
      const arr = ['number', 'lock_stock', 'trans_stock']
      columns.forEach((column, index) => {
        const isHas = arr.includes(column.property)
        const values = data.map(item => item[column.property])
        if (isHas) {
          sums[index] = values.reduce((count, e) => {
            count = vm.$computed.accAdd(count, e)
            return count
          }, 0)
        } else if (column.property === 'entity_warehouse') {
          sums[index] = '合计'
        } else {
          sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>

<style lang="scss" scoped></style>
